<template>
  <div>
    <select class="form-control" v-model="national" @change="change">
      <option v-for="option in this.nationals" v-bind:value="option.id">{{ option.name }}</option>
    </select>
  </div>
</template>

<script>
// import VueResource from 'vue-resource'
export default {
  name: 'National',
  props: ['selectedNational', 'withUnlimit'],
  components: {
    // VueResource
  },
  data: function() {
    return {
      national: this.selectedNational,
      nationals: []
    }
  },
  methods: {
    loaddata: function() {
      if (this.withUnlimit) {
        this.nationals = [{ id: -1, name: '不限' }]
        this.nationals = this.nationals.concat(this.$store.state.nationals)
      }
      else {
        this.nationals = this.$store.state.nationals
      }
    },
    change: function(ele) {
      this.$emit('nationnalchange', this.national)
    }
  },
  created: function() {
    this.loaddata()
  }
}
</script>
